<template>
<div class="view_container">
    <div class="container">
        <div class="top">
            <img src="@/assets/logo.png" class="logo">
        </div>
        <template v-if="mode == 1">
            <div class="other">
                您好，<br>
                欢迎登录
            </div>
            <van-form 
                @submit="onLogin"
                label-width='50px'>
                <van-field
                    clearable
                    v-model="form.phone"
                    name="手机号"
                    label="手机号"
                    placeholder="请输入您的手机号"
                    left-icon="phone"
                    :rules="[{required: true, message: ''}]"/>
                <van-field
                    clearable
                    v-model="form.passwd"
                    type="password"
                    name="密码"
                    label="密码"
                    left-icon="setting"
                    placeholder="请输入您的密码"
                    :rules="[{required: true, message: ''}]"/>
                <van-button 
                    class="bt_container"
                    type="primary"
                    native-type="submit"
                    :loading="loading">
                    登录
                </van-button>
            </van-form>
        </template>
        <template v-else>
            <div class="other">
                初次登录，<br>
                请修改密码
            </div>
            <van-form @submit="onUpdate">
                <van-field
                    v-model="form2.newPasswd"
                    type="password"
                    name="新密码"
                    label="新密码"
                    left-icon="setting"
                    :rules="[{required: true, message: '请填写密码'}]"
                />
                <van-field
                    v-model="form2.newPasswd_"
                    type="password"
                    name="再次输入"
                    label="再次输入"
                    left-icon="setting"
                    :rules="[{required: true, message: '请填写密码'}]"
                />
                <van-button
                    class="bt_container"
                    type="primary"
                    native-type="submit"
                    :loading="loading">
                    确认
                </van-button>
            </van-form>
        </template>
    </div>
</div>
</template>
<script>
//登录页面
export default {
    name: "Login",
    data() {
        return {
            loading:false,
            from:'',  //页面来源
            mode: 1, //1 密码登陆，2 修改密码
            form: {
                phone: "",
                passwd: "",
            },
            form2:{
                passwd: "",
                newPasswd: "",
                newPasswd_:'',
            },
        };
    },
    computed:{
        user:{  //全局的用户信息
            get(){
                return this.$store.state.userModule.user;
            },
            set(newValue){
                this.$store.commit('userModule/setUser',newValue);
            },
        },
    },
    created(){
        this.from = this.$route.query.from;
    },
    methods: {
        onLogin(){  //登录
            this.loading = true;
            this.$Api.login(
                this.form,
            ).then(res => {
                this.$notify({ type: 'success', message: res.msg });
                this.user = res.data;
                if(this.user.passwd == this.user.phone){
                    this.mode = 2;
                }else{
                    this.$router.push(this.from || 'mine');
                }
                delete this.user.passwd;  //前端不储存密码
            }).catch(res=>{
                this.$notify({ type: 'danger', message:res.msg});
            }).finally(()=>{
                this.loading = false;
            });
        },
        onUpdate(){  //修改密码
            if(this.form2.newPasswd != this.form2.newPasswd_){
                this.$notify({ type: 'danger', message:'两次密码不一致'});
                return;
            }
            if(this.form2.newPasswd == this.form.phone){
                this.$notify({ type: 'danger', message:'新密码不能和账号一致'});
                return;
            }
            this.form2.passwd = this.form.passwd;  //填充原密码
            this.loading = true;
            this.$Api.repass(
                this.form2,
            ).then((res) => {
                this.$notify({ type: 'success', message: res.msg });
                this.$router.push(this.from || 'mine');
            }).catch(res=>{
                this.$notify({ type: 'danger', message:res.msg});
            }).finally(()=>{
                this.loading = false;
            });
        },
    },
};
</script>
<style scoped lang="scss">
.view_container {
    background-color: #ffffff;
    height: var(--clientHeight);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .container {
        display: grid;
        grid-gap: 30px;
        width: 80%;
        >.top {
            text-align: center;
            img {
                width: 70%;
                height: 100%;
            }
        }
        >.other{
            margin-top: 40px;
            font-size: 22px;
            line-height: 40px;
            font-weight: bold;
            color: rgb(63, 63, 63);
        }
        /deep/ .van-form {
            overflow: hidden;
            display: grid;
            grid-gap: 30px;
        }
        /deep/ .van-cell::after {
            position: static;
        }
        /deep/ .van-cell {
            padding: 15px 30px;
            background-color: rgb(240, 242, 243);
            border-radius: 100px;
        }
        /deep/.bt_container {
            margin-top: 30px;
            width: 100%;
            padding: 25px 0 !important;
            border-radius: 50px !important;
            font-size: 16px;
            font-weight: bold;
            box-shadow: 0px 5px 20px -3px rgba(16,128,255,0.4);
        }
    }
}
</style>
